<template>
  <div id="edit">
    <van-nav-bar title="编辑资料" left-arrow>
      <template #left>
        <van-icon name="arrow-left" size="20" @click="back" />
      </template>
    </van-nav-bar>

    <div class="information">
      <van-form @submit="onSubmit">
        <van-image
        class="yuantu"
          name="img"
          round
          width="74px"
          height="74px"
          :src="uploads + userInfo.user_img"
        />
        <van-field name="uploader">
          <template #input>
            <van-uploader
            class="genggai"
              v-model="uploader"
              name="img"
              :after-read="UploadImg"
              multiple
              :max-count="1"
            />
          </template>
        </van-field>
        <van-field
          v-model="username"
          name="username"
          label="昵称"
          placeholder="昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <van-field label="性别">
          <template #input>
            <van-radio-group direction="horizontal" v-model="sex" name="sex">
              <van-radio name="男">男</van-radio>
              <van-radio name="女">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="production"
          name="production"
          rows="10"
          autosize
          label="个人简介"
          type="textarea"
          placeholder="请输入个人简介"
        />
        <!-- <div class="content">
          <p>个人简介:</p>
          <textarea class="introduce" id="" cols="20" rows="10"></textarea>
        </div> -->
        <div style="margin: 16px">
          <van-button class="button" native-type="Submit">确认</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      username: "",
      sex: "",
      production: "",
      img: "",
      uploader: [],
      radio: "1",
      userInfo: [],
      image: "",
      uploads: this.$store.state.uploads,
    };
  },
  methods: {
    UploadImg(file) {
      console.log(file);
      let formData = new FormData();
      formData.append("image", file.file);
      //继续使用上文的formData
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      axios
        .post("/api/qbs/api/upload.php", formData, config)
        .then((res) => {
          console.log(res);
          this.img = res.data.data.path;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    onSubmit(values) {
      // console.log("submit", values);

      let user_id = localStorage.getItem("login_user_id");
      axios
        .get("/api/qbs/api/addimg.php?id=" + user_id, {
          params: {
            img: this.img,
          },
        })
        .then((response) => {
          console.log(response);
        });

      axios
        .get("/api/qbs/api/edituser.php?id=" + user_id, {
          params: {
            sex: this.sex,
            img: this.img,
            username: this.username,
            production: this.production,
          },
        })
        .then((response) => {
          console.log(response);
          // var data = res.data;
          // var json = eval("( '+ data +' )");
          // this.users = json.data;
          if (response.status == 200) {
            Toast.success("修改成功");
            // location.reload();
            this.users = response.data.data;
            // console.log(response.data.data.state);
            let state = localStorage.getItem("login_user_state");
            console.log(state);
            if (state == 1) {
              this.$router.push("/myseniorProfile");
            } else {
              this.$router.push("/myuserProfile");
            }
            //  this.$router.push("./myuserprofile");
          } else {
            Toast.fail("修改失败");
          }
        });
    },
    back() {
      this.$router.go(-1);
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
  },
  created() {
    let user_id = localStorage.getItem("login_user_id");
    axios.get("api/qbs/api/userInfo.php?id=" + user_id).then((response) => {
      // console.log(response.data.data);
      this.userInfo = response.data.data;
      // console.log(this.userInfo);
      this.username = this.userInfo.username;
      this.sex = this.userInfo.sex;
      this.production = this.userInfo.production;
      this.img = this.userInfo.user_img;
    });
  },
};
</script>

<style lang="scss" scoped>
#app {
  margin-top: 0;
}
.van-nav-bar {
  background: none;
}
.van-cell {
  background: none;
}
.van-nav-bar__title {
  font-size: 18px;
}
.icon {
  height: 90px;
}
.img {
  left: 40%;
  position: absolute;
}
.camera {
  position: absolute;
  right: 110px;
}
.content {
  height: 230px;
}
.content p {
  margin-bottom: 0;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  margin-left: 15px;
}
.introduce {
  margin: 10px;
  width: 70%;
  background-color: #fff1f4;
  border: 1px solid #ff1f0085;
}
.button {
  position: absolute;
  right: 20px;
  background-color: #f1acd3;
  border-radius: 20px;
}
.van-nav-bar .van-icon {
  color: white;
}
.van-uploader {
  margin: 0 auto;
}
>>> .van-uploader__upload {
  border-radius: 50%;
}
>>> .van-image__img {
  border-radius: 50%;
}
.van-icon-arrow-left::before {
  color: #f1acd3;
}
>>> .van-radio__icon--checked .van-icon {
  background-color: #f1acd3;
  border-color: #f1acd3;
}
.yuantu{
  position: absolute;
  display: inline-block;
  left: 95px;
  top: 57px;
}
.genggai{
  position: relative;
  left: 185px;
  width: 100%;
}
</style>